<template>
  <div class="page">
    <div style="display: flex;">
	<div style="width: calc(100% - 200px);">
    <el-form
      :inline="true"
      v-if="searchVisible"
      class="query-form m-b-10"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter="refreshList()"
      @submit.prevent
    >
      
	  <el-form-item prop="venueName" label="地点：">
			<el-input
				v-model="searchForm.venueName"
				placeholder="请输入地点"
				clearable
			></el-input>
		</el-form-item>
		
		<el-form-item
			label="状态"
			prop="myCreateTime"
		>
			<el-date-picker
			v-model="searchForm.myCreateTime"
			type="date"
			placeholder="选择日期"
			:size="'default'"
			format="YYYY/MM/DD"
			value-format="YYYY-MM-DD"
		/>
		</el-form-item>

		
    </el-form>
</div>
<!-- 搜索框-->
		 <div style="width: 200px;">
			<el-form-item>
				<el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
				<el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
			</el-form-item>
		</div>
	</div>

		<div class="jp-table">
		  <vxe-toolbar ref="venueStatusToolbar" :refresh="{query: refreshList}" custom>
		    <!-- <template #buttons>
				<el-button v-if="hasPermission('resource:venueStatus:del')" type="danger"   icon="del-filled" @click="del()" v-show="$refs.venueStatusTable && $refs.venueStatusTable.getCheckboxRecords().length > 0" plain>删除</el-button>
		    </template> -->
		    <template #tools>
		<vxe-button
		  type="text"
		  :title="
		    searchVisible ? '收起检索' : '展开检索'
		  "
		  icon="vxe-icon-search"
		  class="tool-btn"
		  @click="searchVisible = !searchVisible"
		></vxe-button>
    </template>
		  </vxe-toolbar>
		  <div class="jp-table-body">
		  <vxe-table
				border="inner"
				auto-resize
				resizable
				height="auto"
				:loading="loading"
				size="small"
				ref="venueStatusTable"
				show-header-overflow
				show-overflow
				highlight-hover-row
				:menu-config="{}"
				:print-config="{}"
  :import-config="{
    importMethod: importMethod,
    types: ['csv', 'xls', 'xlsx'],
    remote: true,
  }"
  :export-config="{
    remote: true,
    filename: `查看场地状态数据${moment(new Date()).format(
		'YYYY-MM-DD'
    )}`,
    sheetName: '查看场地状态数据',
    exportMethod: exportMethod,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all'],
  }"

				@sort-change="sortChangeHandle"
				:sort-config="{remote:true}"
				:data="dataList"
				:checkbox-config="{}">
				<vxe-column type="seq" width="40"></vxe-column>
				<!-- <vxe-column type="checkbox"  width="40px"></vxe-column> -->
	<vxe-column
		  field="venueName"
		  title="地点">
		</vxe-column>
    <vxe-column
		  field="date"
		  sortable
		  title="日期">
		</vxe-column>
    <vxe-column
		  field="am1"
		  title="8：30-10：05">
		  <template #default="scope">
			<el-tag :type="scope.row.am1=='空闲'? 'success':'danger'"
				>{{ scope.row.am1 }}
			</el-tag>
		</template>
		</vxe-column>
    <vxe-column
		  field="am2"
		  title="10：25-12：00">
		  <template #default="scope">
			<el-tag :type="scope.row.am2=='空闲'? 'success':'danger'"
				>{{ scope.row.am2 }}
			</el-tag>
		</template>
		</vxe-column>
    <vxe-column
		  field="pm1"
		  title="14：30-16：05">
		  <template #default="scope">
			<el-tag :type="scope.row.pm1=='空闲'? 'success':'danger'"
				>{{ scope.row.pm1 }}
			</el-tag>
		</template>
		</vxe-column>
    <vxe-column
		  field="pm2"
		  title="16：15-17：50">
		  <template #default="scope">
			<el-tag :type="scope.row.pm2=='空闲'? 'success':'danger'"
				>{{ scope.row.pm2 }}
			</el-tag>
		</template>
		</vxe-column>
    <vxe-column
		  field="night1"
		  title="18：30-19：05">
		  <template #default="scope">
			<el-tag :type="scope.row.night1=='空闲'? 'success':'danger'"
				>{{ scope.row.night1 }}
			</el-tag>
		</template>
		</vxe-column>
    <vxe-column
		  field="night2"
		  title="19：15-20：50">
		  <template #default="scope">
			<el-tag :type="scope.row.night2=='空闲'? 'success':'danger'"
				>{{ scope.row.night2 }}
			</el-tag>
		</template>
		</vxe-column>
		<vxe-column
		  fixed="right"
		  align="center"
		  width="200"
		  title="操作">
		  <template   #default="{ row }">
		    <el-button v-if="hasPermission('resource:venueStatus:view')" type="primary" text @click="apply(row)">预约</el-button>
		  </template>
		</vxe-column>
    </vxe-table>
    <vxe-pager
		background
		size="small"
		:current-page="tablePage.currentPage"
		:page-size="tablePage.pageSize"
		:total="tablePage.total"
		:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
		:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
		@page-change="currentChangeHandle">
    </vxe-pager>
    </div>
    </div>
		  <!-- 弹窗, 新增 / 修改 -->
    <VenueStatusForm  ref="venueStatusForm" @refreshDataList="refreshList"></VenueStatusForm>
  </div>
</template>

<script>
  import VenueStatusForm from './VenueStatusForm'
  import venueStatusService from '@/api/resource/venueStatusService'
  export default {
    data () {
		return {
		  searchVisible: true,
		  searchForm: {
			venueName:"",
			myCreateTime:""
		  },
		  dataList: [],
		  tablePage: {
		    total: 0,
		    currentPage: 1,
		    pageSize: 10,
		    orders: [{ column: "create_time", asc: false }],
		  },
		  loading: false
		}
    },
    components: {
		VenueStatusForm
    },
    created () {
    },    
    mounted () {
		this.$nextTick(() => {
		  // 将表格和工具栏进行关联
		  const $table = this.$refs.venueStatusTable
		  const $toolbar = this.$refs.venueStatusToolbar
		  $table.connect($toolbar)
		})
    }, 
    activated () {
		this.refreshList()
    },
    methods: {
		// 获取数据列表
		refreshList () {
		  this.loading = true
		  venueStatusService.list({
		    'current': this.tablePage.currentPage,
		    'size': this.tablePage.pageSize,
		    'orders': this.tablePage.orders,
		    ...this.searchForm
		  }).then((data) => {
		    this.dataList = data.records
		    this.tablePage.total = data.total
		    this.loading = false
		  })
		},
		// 当前页
		currentChangeHandle ({ currentPage, pageSize }) {
		  this.tablePage.currentPage = currentPage
		  this.tablePage.pageSize = pageSize
		  this.refreshList()
		},
		// 排序
    sortChangeHandle(obj) {
		  this.tablePage.orders = [];
		  if (obj.order != null) {
		    this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
		  } else {
		    this.tablePage.orders = [{ column: "create_time", asc: false }];
		  }
		  this.refreshList();
		},
		// 新增
		add () {
		  this.$refs.venueStatusForm.init('add', '')
		},
		// 修改
		edit (id) {
		  id = id || this.$refs.venueStatusTable.getCheckboxRecords().map(item => {
		    return item.id
		  })[0]
		  this.$refs.venueStatusForm.init('edit', id)
		},
		apply(val){
			this.$refs.venueStatusForm.apply(val)
		},
		// 查看
		view (id) {
		  this.$refs.venueStatusForm.init('view', id)
		},
		// 删除
		del (id) {
		  let ids = id || this.$refs.venueStatusTable.getCheckboxRecords().map(item => {
		    return item.id
		  }).join(',')
		  this.$confirm(`确定删除所选项吗?`, '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
		    this.loading = true
		    venueStatusService.delete(ids).then((data) => {
				this.$message.success(data)
				this.refreshList()
				this.loading = false
		    })
		  })
		},
		// 下载模板
		downloadTpl() {
		this.loading = true
		venueStatusService
		  .exportTemplate()
		  .then((data) => {
		    // 将二进制流文件写入excel表，以下为重要步骤
		    this.$utils.downloadExcel(data, "查看场地状态导入模板");
		    this.loading = false
		  })
		  .catch(function (err) {
				this.loading = false
		    if (err.response) {
				console.log(err.response);
		    }
		  });
    },
    // 自定义服务端导入
    importMethod({ file }) {
		// 处理表单
		const formBody = new FormData();
		formBody.append("file", file);
		this.loading = true
		venueStatusService.importExcel(formBody).then((result) => {
		  this.$message.success({
		    dangerouslyUseHTMLString: true,
		    message: result,
		  });
		  this.refreshList();
		});
    },
    // 自定义服务端导出
    exportMethod({ options }) {
		// 传给服务端的参数
		const params = {
		  current: this.tablePage.currentPage,
		  size: this.tablePage.pageSize,
		  orders: this.tablePage.orders,
		  ...this.searchForm,
		  filename: options.filename,
		  sheetName: options.sheetName,
		  isHeader: options.isHeader,
		  original: options.original,
		  mode: options.mode,
		  selectIds:
		    options.mode === "selected"
				? options.data.map((item) => item.id)
				: [],
		  exportFields: options.columns.map(
		    (column) => column.property && column.property.split(".")[0]
		  ),
		};
		this.loading = true;
		return venueStatusService
		  .exportExcel(params)
		  .then((data) => {
		    // 将二进制流文件写入excel表，以下为重要步骤
		    this.$utils.downloadExcel(data, options.filename);
		    this.loading = false;
		  })
		  .catch(function (err) {
		    if (err.response) {
				console.log(err.response);
		    }
		  });
    },
		resetSearch () {
		  this.$refs.searchForm.resetFields()
		  this.refreshList()
		}
    }
  }
</script>

